<template>
	<view>
		<view class="header" :style="'height:'+device.navigationBarHeight+'px;'">
			<view class="back" @click="onBack">
				<u-icon name="arrow-left" color="#2D2D2D" size="16"></u-icon>
			</view>
			<view class="search">
				<u-icon name="search" size="28"></u-icon>
				<input type="text" v-model="keyWord" confirm-type="search" @confirm="onSearch" />
			</view>
		</view>
		<view class="list" :style="{'margin-top': device.navigationBarHeight+'px;'}">
			<!-- <navigator :url="`detail?id=${item.id}`" class="list_item" v-for="(item,index) in goodsList" :key="index">
				<view class="list_item_img">
					<x-image class="x-image" :src="`${imageUrl}${item.picturePath}`"></x-image>
				</view>
				 				<view class="list_item_content">
					<view class="list_item_title">{{item.name+item.remark+item.goodsIntroduce}}</view>
					<view class="list_item_price">
						<u-row justify="space-between" gutter="5">
							<u-col span="3">
								<u-text size="16" color="#e1251b" mode="price" :text="item.sellingPrice"></u-text>
							</u-col>
							<u-col span="3">
								<u-icon name="shopping-cart" color="#2D2D2D" size="28"></u-icon>
							</u-col>
						</u-row>
					</view>
				</view> 
				</navigator>-->

			<view class="item-content-2" v-for="(item, index) in goodsList" :key="index"
				@click="onGotoItemDetail(item)">
				<view class="img-container-2">
					<x-image :src="`${imageUrl}${item.picturePath}`"></x-image>
				</view>

				<view class="item-info-2">
					<view class="item-name-2 x-text-multi">{{item.name}}</view>

					<view class="item-footer-2">
						<view class="price-2">
							<view class="symbol-2">¥</view>
							<view class="value-2">{{item.sellingPrice}}</view>
						</view>
						<u-icon name="shopping-cart" color="xIconColor()" size="28"></u-icon>
					</view>
				</view>

			</view>

		</view>
		<u-empty marginTop="180" mode="search" v-if="goodsList.length == 0"></u-empty>
	</view>
</template>

<script>
	import {
		getGoodsByKeyword
	} from '@/api/goods.js'
	import config from "@/config";
	import XImage from '@/components/image/xImage.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			XImage
		},
		computed: {
			...mapState(['device'])
		},
		data() {
			return {
				imageUrl: config.imageUrl, //,
				keyWord: '',
				goodsList: [],

				errImgUrl: require('@/static/errImg.png'),
			};
		},
		onShow() {

		},
		onLoad(options) {
			this.keyWord = options.keyWord;
			this.getList()
		},
		methods: {
			onGotoItemDetail(item) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.id
				})
			},
			onBack() {
				uni.navigateBack()
			},
			onSearch(e) {
				this.getList()
			},
			getList(e) {
				uni.showLoading();
				getGoodsByKeyword({
					keyword: this.keyWord
				}).then(res => {
					this.goodsList = res;
					uni.hideLoading();
				})
			},

		}
	};
</script>


<style lang="scss" scoped>
	.item-content-2 {
		display: flex;
		overflow: hidden;
		// position: relative;
		// height: 100%;
		height: 220rpx;
		margin: 0 16rpx 16rpx;

		.img-container-2 {
			width: 220rpx;
			height: 220rpx;
			position: relative;
			overflow: hidden;

			.x-image {
				display: flex;
				justify-content: center;
				align-item: center;
				width: 100%;
			}
		}

		.item-info-2 {
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: flex-end;

			.item-name-2 {
				font-size: 25rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #2D2D2D;
				line-height: 36rpx;
				margin: 10rpx 10rpx 0;
			}

			.item-footer-2 {
			
				display: flex;
				bottom: 16rpx;
				justify-content: space-between;
				flex-grow: 1;
				align-items: flex-end;
				margin: auto 0rpx 40rpx 10rpx;
				
				.price-2 {
					display: flex;
					align-items: flex-end;

					.symbol-2 {
						height: 36rpx;
						font-size: 25rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #E5412D;
						line-height: 36rpx;
					}

					.value-2 {
						margin-left: 2rpx;
						height: 45rpx;
						font-size: 33rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #E5412D;
						line-height: 45rpx;
					}
				}
			}

		}
	}
</style>

<style lang="scss" scoped>
	@import '@/mixins/theme/xTheme.scss';

	page {
		padding-top: 112rpx;
		background: $x-content-background;
	}

	.x-image {
		width: 220rpx;
		height: 220rpx;
		overflow: hidden;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: #fff;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.4);
		width: 100%;
		border: 2rpx sollid #F5F5F5;
		display: flex;
		align-items: flex-end;

		.back {
			padding: 20rpx 30rpx 26rpx 30rpx;
		}

		.search {
			width: 480rpx;
			height: 54rpx;
			border: 2rpx solid #F5F5F5;
			background-color: #F9F9F9;
			border-radius: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #707070;
			font-size: 26rpx;
			position: absolute;
			bottom: 15rpx;
			left: 96rpx;

			&>input {
				width: 100%;
			}
		}

	}

	.list {
		width: 100%;
		padding: 20rpx;
	}

	.list_item {
		width: 100%;
		border-radius: 6rpx;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		height: 240rpx;
	}

	.list_item_img {
		// padding: 10rpx;
		// height: 100%;
		// // margin-right: 20rpx;
		padding: 10rpx;
		width: 220rpx;
		height: 220rpx;
	}

	.list_item_img>image {
		width: 220rpx;
	}

	.list_item_content {
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		height: 100%;
		width: inherit;
	}

	.list_item_title {
		// font-size: 30rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list_item_price {
		color: #f56c6c;
	}

	.no_data {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #666;

		&>image {
			width: 320rpx;
			height: 280rpx;
			margin: 100rpx auto 20rpx;
		}
	}
</style>